<template>
	<view></view>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		countWarningByTime
	} from '@/common/api/approve/home/home_api.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			value: {
				type: Number,
				default: 2
			}
		},
		data() {
			return {
				queryParam: {
					queryType: 2,
					f_deptid: ''
				}
			}
		},
		computed: {
			...mapGetters(['getParentid'])
		},
		watch: {
			value: {
				handler(newval) {
					this.queryParam.queryType = newval
					this.getCountWarningByTime()
				},
				// immediate: true,
				deep: true
			}

		},
		mounted() {
			// this.initChart();
			this.queryParam.f_deptid = this.getParentid
			this.getCountWarningByTime()
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.dispose();
			}
		},
		methods: {
			async getCountWarningByTime() {
				const res = await countWarningByTime(this.queryParam)
				console.log(res, 'fhiwwihwf');
				const arr = res.data.map(item => {
					return {
						key: item.key,
						value: item.count,
						name: item.name
					}
				})
				const data = arr.filter(item => item.key != "gathering" && item.value != 0)
				this.initChart(data);
			},
			initChart(data) {
				var proDom = document.getElementById('warnEcharts')
				if (proDom) {
					this.chart = echarts.init(warnEcharts);
					// 配置图表选项并设置到图表实例上  
				} else {
					console.error('图表容器不存在，无法初始化ECharts');
					return
				}
				this.chart.setOption({
					series: [{
						type: 'pie',
						data: data,
						// labelLine: {
						// 	lineStyle: {
						// 		color: '#bdbdbd',
						// 		width: 1
						// 	},
						// 	length: 30,
						// 	length2: 60,
						// 	// minTurnAngle: 120
						// },
						// labelLayout: {
						// 	verticalAlign: 'bottom',
						// 	dy: -2
						// },
						label: {
							color: '#000000',
							fontStyle: 'normal',
							fontWeight: 'lighter',
							fontFamily: 'MicrosoftYaHei',
							fontSize: 15,
							// padding: [23, -80],
							formatter: '{c|{c}}{a| 人}\n{b|{b}}',
							rich: {
								a: {
									fontFamily: 'MicrosoftYaHei',
									fontWeight: '400',
									fontSize: 13,
									color: '#bdbdbd',
									lineHeight: 20
								},
								b: {
									fontFamily: 'MicrosoftYaHei',
									fontWeight: '400',
									fontSize: 13,
									color: '#bdbdbd',
									lineHeight: 20
								},
								c: {
									fontFamily: 'Myriad Pro',
									fontWeight: '600',
									fontSize: 15,
									color: '#000000',
									lineHeight: 20
								}
							}
						},
						radius: ['70%', '60%'],
						center: ['50%', '50%'],
						padAngle: -5,
						top: '15%',
						bottom: '5%',
						// itemStyle: {
						// 	borderRadius: 50
						// },
						color: ['#CF3730 ', '#FF9F00', '#3496FB', '#00B853'],
					}],

				})
			}
		},
	}
</script>

<style>

</style>